<template>
	<view>
		<view class="topInfo">
			<view class="lineView"></view>
			<template v-if="loadFlag">
				<view class="infoCon">最近{{diffDays}}天,你在{{subName}}各方面的能力如下:</view>
			</template>
			<template v-else>
				<loading></loading>
			</template>
		</view>
		<view class="abilityWrap">
			<view class="proSwiper">
				<template v-if="loadFlag">
					<swiper class="swipers" :indicator-dots="dotsFlag" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#ffffff" :autoplay="autoplayFlag" :circular="circularFlag">
						<swiper-item class="swiper-item"
							v-for="(item,index) in nlReport"
							:key="index"
						>
						
							<view class="colBlock top"></view>
							<view class="colBlock bottom"></view>
							<view class="itemCon">
								<view class="conTop">
									<view class="tit">{{item.title}}</view>
									<view class="score" :class="[item.score > 65 ? 'good' : 'bad']">{{item.score}}分</view>
									<view class="smCon">理解辨析题答题数：{{item.dtNum}}道</view>
									<view class="smCon">解答知识点正确率：{{item.sucPer}}%</view>
									<view class="smCon">全网平均正确率：{{item.sucPerAll}}%</view>
								</view>
								<view class="conBot">
									<view class="botTit">{{item.step}}</view>
									<view class="botInfo">{{item.explain}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<image class="shadowImg left" src="../../../static/images/zhuxue/shadow-left.png"></image>
					<image class="shadowImg right" src="../../../static/images/zhuxue/shadow-right.png"></image>
				</template>
				<template v-else>
					<loading></loading>
				</template>
			</view>
		</view>
		<uni-drawer :visible="showRight" mode="right" :isHadFlDataFlag="true" :zIndex="999" @close="closeDrawer">
			<filters
				v-if="subArr!= ''"
				:currRole="currRole"
				:subArr="subArr"
				:subIndex="subIndex"
				:startDate="startDate"
				:endDate="endDate"
				@selectCurrSub="selectCurrSub"
				@sureFilter="sureFilter"
				@bindDateChange="bindDateChange"
				@bindDateChangeEnd="bindDateChangeEnd"
			/>
		</uni-drawer>
	</view>
</template>

<script>
	import { getSelfSubject,getAbilityRep } from '@/api/zhuxue'
	import Filters from '../learnRecord/components/Filter'
	export default {
		components:{
			Filters
		},
		data() {
			return {
				abilityArr:[
					{id:1,name:'能力报告1'},
					{id:2,name:'能力报告2'},
					{id:3,name:'能力报告3'}
				],
				dotsFlag:true,
				autoplayFlag:false,
				circularFlag:true,
				subArr:[],
				subIndex:0,
				subId:0,
				subName:'',
				startDate:'',
				endDate:'',
				showRight: false,
				diffDays:0,
				nlReport:[{type:'liaojie'},{type:'lijie'},{type:'yy'}],
				loadFlag:false,
				currRole:''
			}
		},
		onLoad(options){
			this.currRole = options.currRole;
			this.getSelfSubjectList();
		},
		methods: {
			getSelfSubjectList(){
				var field = { account:uni.getStorageSync('token') };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getSelfSubject({content:contentStr}).then(res=>{
					//console.log(res)
					this.subArr = res.data.datas.subjectList;
					this.subId = this.subArr[0].subjectId;
					this.subName = this.subArr[0].subjectName;
					this.getAbilityRep();
				}).catch(err=>{
					console.log(err)
				});
			},
			getAbilityRep(){
				var field = { account:uni.getStorageSync('token'),subId:this.subId,sDate:this.startDate,eDate:this.endDate };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getAbilityRep({content:contentStr}).then(res=>{
					//console.log(res)
					var tmpResBig = res.data.datas;
					var tmpRes = tmpResBig.nlReport[0];
					this.diffDays = tmpResBig.diffDays;
					this.startDate = tmpResBig.sDate;
					this.endDate = tmpResBig.eDate;
					for(let i in this.nlReport){
						if(this.nlReport[i].type == 'liaojie'){
							this.nlReport[i].title = '了解能力';
							this.nlReport[i].score = tmpRes.score_liaojie;
							this.nlReport[i].dtNum = tmpRes.number_liaojie;
							this.nlReport[i].sucPer = tmpRes.success_scale_liaojie;
							this.nlReport[i].sucPerAll = tmpRes.all_success_scale_liaojie;
							this.nlReport[i].step = tmpRes.step_liaojie;
							this.nlReport[i].explain = tmpRes.explain_liaojie;
						}else if(this.nlReport[i].type == 'lijie'){
							this.nlReport[i].title = '理解能力';
							this.nlReport[i].score = tmpRes.score_lijie;
							this.nlReport[i].dtNum = tmpRes.number_lijie;
							this.nlReport[i].sucPer = tmpRes.success_scale_lijie;
							this.nlReport[i].sucPerAll = tmpRes.all_success_scale_lijie;
							this.nlReport[i].step = tmpRes.step_lijie;
							this.nlReport[i].explain = tmpRes.explain_lijie;
						}else{
							this.nlReport[i].title = '应用能力';
							this.nlReport[i].score = tmpRes.score_yy;
							this.nlReport[i].dtNum = tmpRes.number_yy;
							this.nlReport[i].sucPer = tmpRes.success_scale_yy;
							this.nlReport[i].sucPerAll = tmpRes.all_success_scale_yy;
							this.nlReport[i].step = tmpRes.step_yy;
							this.nlReport[i].explain = tmpRes.explain_yy;
						}
					}
					this.loadFlag = true;
				}).catch(err=>{
					console.log(err)
				});
			},
			bindDateChange(e){
				var tmpCurrDate = this.startDate;
				this.startDate = e;
				if(this.startDate > this.endDate){
					this.util.showToast('开始日期不能大于结束日期');
					this.startDate = tmpCurrDate;
					return;
				}
			},
			bindDateChangeEnd(e){
				var tmpEndDate = this.endDate;
				this.endDate =  e;
				if(this.startDate > this.endDate){
					this.util.showToast('开始日期不能大于结束日期');
					this.endDate = tmpEndDate;
					return;
				}
			},
			selectCurrSub(index,item){
				this.showRight = true;
				this.subIndex = index;
				this.subId = item.subjectId;
				this.subName = item.subjectName;
				this.getAbilityRep();
			},
			onNavigationBarButtonTap(){
				this.showRight = true;
			},
			sureFilter(){
				this.showRight = false;
				this.getAbilityRep();
			},
			closeDrawer(){
				this.showRight = false;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.itemCon{
		width: 500rpx;
		height: 580rpx;
		border-radius: 15rpx;
		border: 1rpx dashed #fff;
		padding: 20rpx;
		position: relative;
		z-index:5;
		.botTit{
			font-weight: bold;
			color: #fff;
			text-align: center;
			@include respTo(phone){
				margin: 50rpx 0 15rpx 0;
				font-size: $font-size32;
			}
			@include respTo(pad){
				margin: 150rpx 0 15rpx 0;
				font-size: $padSize26;
			}
		}
		.botInfo{
			color: $pss-text-color3;
			@include respTo(phone){
				font-size: $font-size28;
			}
			@include respTo(pad){
				font-size: $padSize16;
			}
		}
		.conTop{
			text-align: center;
			.tit{
				color:#3BAAD3;
				font-weight: bold;
				@include respTo(phone){
					margin-bottom: 15rpx;
					font-size: $font-size32;
				}
				@include respTo(pad){
					margin-bottom: 10rpx;
					font-size: $padSize26;
				}
			}
			.score{
				font-weight: bold;
				margin-bottom: 15rpx;
				@include respTo(phone){
					font-size: $font-size36;
				}
				@include respTo(pad){
					font-size: $padSize24;
				}
				&.bad{
					color: $pss-color-red;
				}
				&.good{
					color: $pss-color-green;
				}
			}
			.smCon{
				color: $pss-text-color3;
				margin-bottom: 15rpx;
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize16;
				}
			}
		}
	}
	.abilityWrap{
		position: absolute;
		left: 0;
		right: 0;
		top: 90rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.proSwiper{
			width: 600rpx;
			height: 720rpx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.swipers{
				//85deff
				width: 600rpx;
				height: 710rpx;
				.swiper-item{
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					.colBlock{
						width: 100%;
						height: 50%;
						background: green;
						position: absolute;
						left: 0;
						&.top{
							top: 0;
							background:#85deff;
						}
						&.bottom{
							bottom: 0;
							background:$pss-color-blue;
						}
					}
				}
			}
			.shadowImg{
				width:96rpx;
				height: 11rpx;
				position: absolute;
				bottom: -5rpx;
				z-index: -1;
				&.left{
					left: 0;
				}
				&.right{
					right: 0;
				}
			}
		}
	}
	.topInfo{
		@include respTo(phone){
			height: 90rpx;
			padding: 0 30rpx;
			font-size: $font-size30;
		}
		@include respTo(pad){
			height: 60rpx;
			padding: 0 20rpx;
			font-size: $padSize18;
		}
		background: #fff;
		display: flex;
		align-items: center;
		color: $pss-text-color3;
		box-shadow: 0 5rpx 8rpx rgba(0,0,0,.02);
		.lineView{
			@include respTo(phone){
				width: 10rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
			@include respTo(pad){
				width: 6rpx;
				height: 16rpx;
				margin-right: 6rpx;
			}
			background: $pss-color-primary_1;
			border-radius: 20rpx;
		}
	}
</style>
